<template>
  <div class="bank-manage">
    <a-input-search
      placeholder="输入题库id进行搜索"
      style="width: 400px"
      size="large"
      :allowClear="true"
      @search="onSearch"
    />
    <div class="add-bank">
      <el-button @click="uploadBank">
        <span class="el-icon-upload2"></span>
        上传题库
      </el-button>
    </div>
    <!-- <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="题库ID" width="350" align="center">
          <template slot-scope="scope">
            <i class="el-icon-document-copy"></i>
            <span style="margin-left: 10px">{{ scope.row._id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题目数量" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main> -->
    <a-table
      :columns="columns"
      :row-key="(record) => record._id"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="_id" slot-scope="text">
        {{ text }}
      </template>
      <template slot="tag" slot-scope="text">
        {{ text }}
      </template>
      <template slot="count" slot-scope="text">
        {{ text }}
      </template>
      <template slot="operation" slot-scope="text, record">
        <span class="edit" @click="editMsg(record._id)">编辑</span>
        <span class="delete" @click="deleteMsg(record._id)">删除</span>
      </template>
    </a-table>
  </div>
</template>

<script>
const align = "center";
const columns = [
  {
    title: "题库ID",
    dataIndex: "_id",
    key: "_id",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "_id" },
  },
  {
    title: "题库标题",
    dataIndex: "tag",
    key: "tag",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "tag" },
  },
  {
    title: "题目数量",
    dataIndex: "count",
    key: "count",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "count" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: "30%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "operation" },
  },
];
const data = [
  {
    _id: "11111",
    tag: "前端",
    count: 1000,
  },
  {
    _id: "11112",
    tag: "后端",
    count: 1000,
  },
  {
    _id: "11113",
    tag: "数据库",
    count: 1000,
  },
  {
    _id: "11114",
    tag: "Java",
    count: 1000,
  },
  {
    _id: "11115",
    tag: "C++",
    count: 1000,
  },
  {
    _id: "11116",
    tag: "C++",
    count: 1000,
  },
];
import { getBankList, deleteBank, searchBank } from "network/bank";
export default {
  name: "",
  data() {
    return {
      data: [],
      pagination: {
        hideOnSinglePage: true,
        defaultPageSize: 9,
        showQuickJumper: true,
      },
      loading: false,
      columns,
    };
  },
  mounted() {
    // this.fetch();
    this.getBankList();
  },
  methods: {
    async getBankList() {
      const res = await getBankList();
      if (res.data.code === 200) {
        this.data = res.data.data.map((item) => {
          item.count = item.list.length;
          return item;
        });
      }
      const pagination = { ...this.pagination };
      pagination.total = this.data.length;
      this.loading = false;
      this.pagination = pagination;
    },
    uploadBank() {
      this.$router.push({ path: "/uploadBank" });
    },
    async onSearch(value, event) {
      console.log("搜索");
      console.log("value", value);

      if (value) {
        const res = await searchBank(value);
        if (res.data.code === 200) {
          const bank = res.data.data;
          bank.count = res.data.data.list.length;
          this.data = [bank];
        }
      } else {
        this.getBankList();
      }
    },
    deleteMsg(id) {
      console.log(id);
      const self = this;
      this.$confirm({
        title: "删除用户",
        content: "确定删除该题库吗",
        okText: "确认",
        cancelText: "取消",
        async onOk() {
          const res = await deleteBank(id);
          if (res.data.code === 200) {
            self.$message.success("已成功删除该题库");
            self.getBankList();
          } else {
            self.$message.error("删除题库失败");
          }
        },
        onCancel() {
          // self.$message.info('取消退出登录');
        },
      });
    },
    editMsg(id) {
      console.log(id);
      this.$router.push({ path: "/bankDetail/" + id });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.loading = true;
      getBankList().then((res) => {
        if (res.data.code === 200) {
          this.data = res.data.data.map((item) => {
            item.count = item.list.length;
            return item;
          });
        }
        const pagination = { ...this.pagination };
        pagination.total = this.data.length;
        this.loading = false;
        this.pagination = pagination;
      });

      // reqwest({
      //   url: "https://randomuser.me/api",
      //   method: "get",
      //   data: {
      //     results: 10,
      //     ...params,
      //   },
      //   type: "json",
      // }).then((data) => {
      //   const pagination = { ...this.pagination };
      //   // Read total count from server
      //   // pagination.total = data.totalCount;
      //   pagination.total = 200;
      //   this.loading = false;
      //   this.data = data.results;
      //   this.pagination = pagination;
      // });
    },
    // handleEdit(index, row) {
    //   console.log(index, row);
    //   this.$router.push({ path: "/bankDetail" });
    // },
    // handleDelete(index, row) {
    //   console.log(index, row);
    //   this.$confirm("删除该题库, 是否确定?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       this.$toast.show("删除成功", "success", 1000);
    //     })
    //     .catch(() => {
    //       this.$toast.show("取消删除", "default", 1000);
    //     });
    // },
  },
};
</script>

<style lang="less" scoped>
.bank-manage {
  width: 100%;
  text-align: center;
  /deep/.ant-input-affix-wrapper {
    margin-bottom: 25px;
  }
  .delete,
  .edit {
    color: #bbbbbb;
    cursor: pointer;
    &:hover {
      color: #041527;
    }
  }
  .edit {
    margin-right: 20px;
  }
}
.add-bank {
  position: absolute;
  top: 107px;
  right: 42px;
  z-index: 1;
}

.add-bank .el-button {
  width: 150px;
  height: 50px;
}
</style>
